<template>
  <div>
      
      <div class="invite-wraper">
         <div class="invite_algin">
            <div class="logo wraper">
              <image style="width:140px;height:140px;" src="root:img/share/logo@2x.png"></image>
            </div>
            <text style="color:#ffffff;font-size:48px;margin-top:24px;">AXSwap震撼上线</text>
            <text style="font-size:30px;color:rgba(255,255,255,.6);margin-top:16px;">改变世界从AXSwap开始</text>
            <text style="font-size:24px;color:rgba(255,255,255,.6);margin-top:16px;">欢迎使用AXSwap,请使用助记词导入钱包登录</text>
             <div style="width:750px;height:600px;">
                <image style="width:750px;height:600px" src="root:img/share/share@2x.png"></image>
            </div>
            <div class="invite-btn wrapper">
                <div class="invite-left">
                  <a href="https://cw.pub/w0hn">
                    <div class="download-ios download-wraper">
                        <image style="width:34px;height:34px" src="root:img/share/ios@2x.png"></image>
                        <text style="font-size:30px;color:rgba(255,255,255,1);">ios版下载</text>
                    </div>
                  </a>
                  <a :href="url">
                    <div class="download-and download-wraper">
                          <image style="width:34px;height:34px" src="root:img/share/anzhuo@2x.png"></image>
                        <text  style="font-size:30px;color:rgba(255,255,255,1);">android版下载</text>
                    </div>
                  </a>
                </div>
                <div class="invite-right">
                  <image style="width:140px;height:140px;" src="root:img/share/erweima@2x.png"></image>
                </div>
            </div>
           
         </div>
         <div class="attention" v-if="attention" @click="attention = false">
           <p class="attention-text" style="margin-top:200px;">1、点击右上角按钮</p>
           <p class="attention-text">2、选择在浏览器中打开</p>
         </div>
      </div>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      url:'',
      attention:true,
    }
  },
  created() {
    this.get_download_url()
  },
  methods: {
    user_register(){
      this.$router.push('/h5/user_register.js')
    },
    get_download_url(){
       this.$ajax.get('/api/index/checkupdate',{params:{appType:1,appNumber:1}}).then((res)=>{
         const data = res.data
         this.url = data.result
       })
    }
  }
}
</script>
<style scoped>
  .attention{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0,.5);
    z-index: 1;
  }
  .attention-text{
    color: #ffffff;
    width: 750px;
    padding-left: 200px;
  }
  .wrapper{
    display: flex;
    flex-direction: row;
  }
  .head{
    width: 750px;
    padding-left: 30px;
    padding-right: 30px;
    height: 100px;
    justify-content: space-between;
    align-items: center;
  }
  .invite-wraper{
    background-color:rgba(38,85,253,1);
  }
  .logo{
    justify-content: center;
    margin-top: 216px;
  }
  .invite_algin{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .invite-btn{
    width: 550px;
    height: 296px;
    margin-left: 100px;
  }
  .download-wraper{
    width: 300px;
    height: 60px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
  }
  .download-ios{
    margin-top: 40px;
    background-color: #67D689;
  }
  .download-and{
    margin-top: 30px;
    background-color: #60CBFA;
  }
  .invite-right{
    margin-left: 60px;
    margin-top: 40px;
  }
</style>